<template>
  <div class="tabs-container">
    <el-tabs v-model="activeTab" @tab-click="handleTabClick">
      <el-tab-pane
        v-for="tab in tabs"
        :key="tab.name"
        :label="tab.title"
        :name="tab.name"
      >
        {{ tab.content }}
      </el-tab-pane>
    </el-tabs>
    <div class="tab-buttons">
      <!-- 前一个标签页按钮 -->
      <el-button @click="prevTab" icon="el-icon-arrow-left" circle></el-button>
      <!-- 后一个标签页按钮 -->
      <el-button @click="nextTab" icon="el-icon-arrow-right" circle></el-button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const activeTab = ref('tab1');
const tabs = ref([
  { name: 'tab1', title: '标签页 1', content: '这是第一个标签页的内容' },
  { name: 'tab2', title: '标签页 2', content: '这是第二个标签页的内容' },
  { name: 'tab3', title: '标签页 3', content: '这是第3个标签页的内容' },
  { name: 'tab4', title: '标签页 4', content: '这是第4个标签页的内容' },
  { name: 'tab5', title: '标签页 5', content: '这是第5个标签页的内容' },
  { name: 'tab6', title: '标签页 6', content: '这是第6个标签页的内容' },
  { name: 'tab7', title: '标签页 7', content: '这是第7个标签页的内容' },
  { name: 'tab8', title: '标签页 8', content: '这是第8个标签页的内容' },
  // ...其他标签页
]);

const prevTab = () => {
  const currentIndex = tabs.value.findIndex(tab => tab.name === activeTab.value);
  if (currentIndex > 0) {
    activeTab.value = tabs.value[currentIndex - 1].name;
  }
};

const nextTab = () => {
  const currentIndex = tabs.value.findIndex(tab => tab.name === activeTab.value);
  if (currentIndex < tabs.value.length - 1) {
    activeTab.value = tabs.value[currentIndex + 1].name;
  }
};

const handleTabClick = (tab, event) => {
  console.log('Clicked tab:', tab, 'Event:', event);
};
</script>

<style>
.tabs-container {
  display: flex;
  flex-direction: column;
  width: 250px;
}

.tab-buttons {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
</style>